<template>
  <div class="navList">
    <nav-bar-item path="/home">
      <template v-slot:itemName>
        <span>{{lb[0].headheadline}}</span>
      </template>
    </nav-bar-item>
    <nav-bar-item path="/category/hot" query="40">
      <template v-slot:itemName>
        <span>{{lb[1].headheadline}}</span>
      </template>
    </nav-bar-item>
    <nav-bar-item path="/category/all" query="00">
      <template v-slot:itemName>
        <span>{{lb[2].headheadline}}</span>
      </template>
    </nav-bar-item>
  </div>
</template>

<script>
import navBarItem from "./navBarItem";
export default {
  name: "navList",
  components: {
    navBarItem,
  },
  data() {
    return {
      lb: [],
    };
  },
  created() {
    this.xs();
  },
  methods: {
    xs() {
      this.$axios
        .get("https://localhost:44358/api/app/head/head-lists")
        .then((a) => {
          this.lb = a.data;
          console.log(this.lb[0].headheadline);
          console.log(this.lb[1].headheadline);
          console.log(this.lb[2].headheadline);
          console.log(this.lb);
        });
    },
  },
};
</script>

<style scoped>
</style>